<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>变化样式transform |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/28.0cab868b.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" aria-current="page" class="active sidebar-link">13-transform</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/15-transform.html#变化样式transform" class="sidebar-link">变化样式transform</a></li></ul></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="变化样式transform"><a href="#变化样式transform" class="header-anchor">#</a> 变化样式transform</h2> <p><strong>变形主体:页面中的元素(盒子)</strong>,</p> <p><strong>方式:旋转,平移,拉伸和压缩,倾斜.</strong></p> <p><strong>核心概念</strong>:</p> <ul><li><strong>使其物体发生形状和位置的变化</strong></li></ul> <p><strong>过渡和2d变化的最本质的区别</strong></p> <blockquote><p><strong>transition:描述了物体在变化过程中的方式.</strong></p> <p><strong>transform描述了物体形变的一个结果</strong></p></blockquote> <h3 id="平移-translate-x-y"><a href="#平移-translate-x-y" class="header-anchor">#</a> 平移:translate(x,y)</h3> <blockquote><p><strong>两个参数,第一个参数为X轴的平移,第二个参数Y轴平移</strong></p> <p><strong>只写一个参数默认就是x轴的平移</strong></p> <p><strong>前端平面直角坐标系 左上为顶点  水平向右x+  竖直向下Y+</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>100px <span class="token punctuation">,</span> 300px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token comment">/*自身初始位置为原点,盒子向右平移100px,向下平移300px.
  如果去写负值呢?*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-200px <span class="token punctuation">,</span> -200px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*盒子此时往左平移200px,往上平移200px;
 我想单独给X轴设置偏移,可以只写一个值.如果我们就想单独给Y轴偏移呢?
 tranlate有单例型写法 translateX  translateY*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*这时候我们就能单独给元素设置Y轴的平移量
 这时候我们再想平移是不是直接再后面再写上translateX*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*两个transform样式相互覆盖,那我们现在这么办呢?
 tranform里面可以接受多个平移*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-CSS line-numbers-mode"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span>
<span class="token comment">/*并且我们写上同一个方向值的话,不会后写的覆盖先写的,同个方向值会相互叠加
  这里面还可以去接受百分比*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>50%<span class="token punctuation">,</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*此时向左向右偏移了150px,这时候的百分比相对于谁呢?
  这个百分比相对于自己的宽高.  
  这时候我们就可以改改我们以前的代码了来实现水平垂直居中了*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.bigbox</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span>3px solid skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.smallbox</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
			<span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
			<span class="token property">margin-left</span><span class="token punctuation">:</span> -150px<span class="token punctuation">;</span>
			<span class="token property">margin-top</span><span class="token punctuation">:</span> -150px<span class="token punctuation">;</span>
      <span class="token comment">/*向左向上移动小盒子一半的宽高,但是一改小盒子的宽高就会崩掉*/</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.smallbox</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>  
<span class="token comment">/*不用知道宽高,百分之百就是当前的宽度和高度.
 我们只需要让元素沿着X和Y轴的反方向移动-50%的子元素宽高;就能水平垂直居中了.
 此时无论怎么改小盒子的宽高,依然会在大盒子中水平垂直居中.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><em><strong>居中方式的改进</strong></em></p> <p>​      <em>position:absolute;</em></p> <p>​      <em>left:50%;</em></p> <p>​      <em>top:50%;</em></p> <p>​      <em>transform:translate(-50%,-50%);</em></p> <p>我们继续回到translate</p> <blockquote><p><strong>这个实现功能性质和定位(相对定位)一摸一样</strong></p> <p>都是参照自己原来的位置去进行移动.</p> <p>这个盒子脱离了文档流没有,是不是灵魂出窍,对后面的元素的有没有影响呢?</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>300px<span class="token punctuation">,</span> 100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
		我要忘了你的样子	
<span class="token comment">/*文字还是能感觉到这个盒子,所以它也不会脱离文档流,和我们相对定位一样.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>定位和transfrom里的translate有什么区别</strong></p> <blockquote><p><strong>1.定位是有层级的,是有参照物的,相对定位参照于自身的坐标系</strong></p></blockquote> <p><strong>2,本质上的区别</strong></p> <p>​	<strong>游览器渲染的底层原理</strong></p> <blockquote><p><strong>1.读取代码,语义分析,在游览器底层理解代码的功能</strong></p> <p>比如读取元素宽高是什么,以及背景颜色等.解析游览器所理解的代码格式.</p> <p><strong>2.HTML语法解析器解析HTML部分形成一个DOM(document object model)文档对象模型树</strong>.</p> <p>游览器在加载一个网站的时候,首先会受到网址对应的html文件.</p> <p>然后游览器把这个html文件解析为一个对象(节点树).这样的从上到下的树形结构.</p> <p>比如body节点是html节点的后代等等.</p> <p>我们就可以顺着这颗树去进行很多的操作.</p> <p>这样的对象模型决定了节点之间都有一定的关联,它们关系可能有父子、有兄弟.</p> <p>这就是文档对象模型.</p> <p><strong>3.CSS解析器解析CSS部分(:生成一张配置表(CSSOM层叠样式表对象模型)</strong>.</p> <p>不仅是外部CSS,内部style元素或行内style属性中的CSS也会被剖析并添加CSSOM中.</p> <p>和DOM类似,CSSOM也是一个树形节点,包含页面中样式的层次结构.</p> <p>这样的上面写满了我们的样式.然后将这些样式分别放到对应的DOM树节点上.</p> <p>得到一颗带有样式属性的DOM树.</p> <p><strong>4.DOM加CSSOM==&gt;render树</strong></p> <p>渲染树里面包括了元素,元素结构和CSS样式.</p> <p>这个结构很像DOM,但也不完全一样,被隐藏的DOM节点不会出现在这里,</p> <p>在构建完成的渲染树中,节点都应该知道了自己是什么颜色,文字使用哪种字体显示,以及是否有明确的宽度等等.</p> <p><strong>5.render树==&gt;生成渲染的组织架构painting(绘制).</strong></p> <p>游览器引擎开始布局<strong>将页面中元素所有盒子一个需要的尺寸数据全部计算出来</strong>.</p> <p>因为页面元素的位置都是相对的,其中的一个元素位置发生变化,会引起其他元素位置变化.这个过程叫<strong>reflow（重排）<strong>或者也叫</strong>布局(layout)</strong></p> <p>*<em>6.根据七层层级结构,*(块级元素 浮动元素 行内元素 定位层级)<em>从低到高依次绘制展示效果</em></em></p> <p>但是当render树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为<strong>repaint重绘</strong>。</p></blockquote> <p><strong>重绘和重排的区别</strong></p> <ul><li><strong>重排必将引起重绘,重绘不一定会引起重排</strong>,比如：只有颜色改变的时候就只会发生重绘而不会引起回流.</li></ul> <blockquote><p><strong>定位是一个危险样式,会引起重绘重排,可能会对也页面大部分元素造成位置结构的破坏</strong>.</p> <p>只要是我们通过定位去移动盒子就会让页面所有的元素位置等属性重新去进行计算(重排,重绘)</p> <p>消耗的游览器资源也高.会引起**性能问题,**游览器处理定位是非常谨慎的.</p> <p><strong>tranform不是一条危险的样式,页面不需要重新去进行计算.只需在渲染的时候渲染出来,</strong></p> <p><strong>性能优秀,是定位的10倍左右甚至更多,消耗资源低</strong></p> <p><strong>position:relative,这个为移动盒子</strong>,虽然没有脱离文档流,但是盒子确实是移动了.</p> <p><strong>tansform:translate这个为移动盒子的投影, 正常情况下基本没有区别.</strong></p> <p>这个盒子的位置没有改变,<strong>只是显示的时候位置发生了偏差</strong></p></blockquote> <p><strong>特殊情况下,它们区别就很大</strong></p> <blockquote><p><strong>特殊情况:需要有大量的高密度的位置控制的时候,transform:translate非常优秀</strong></p> <p>游览器在计算CSS效果时,会在某些情况下多花些时间,比如,如果修改文本大小,那么生成的行内盒子里的文本可能会换行,元素本身也会变高,而这个变高的元素又会推下面的元素.这样你挤我我挤你.就会迫使游览器进一步重新计算布局.</p> <p>在使用CSS变换时,相应的计算只会影响相关元素的坐标系统,既不会改变元素内部的布局,也不会影响外部的其他元素.</p> <p>这时候的计算基本可以独立于页面上的其他计算.变换不会影响其他元素,多数游览器也会尽量安排图形处理器来做这些计算,毕竟图形处理器专门设计来做这种数学计算.</p> <p>换句话说变换的性能很好,比如你想要的效果可以用变换来做,那么变换的性能一定更好,连续多重的变换性能更佳.</p> <p><strong>结论:计算资源消耗较低 性能提升</strong></p> <p><strong>我们推荐使用变换</strong></p></blockquote> <hr> <p>我们深入去看看两者的不同</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
		<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token property">animation</span><span class="token punctuation">:</span>relativeMove 1s infinite<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token atrule"><span class="token rule">@keyframes</span> relativeMove</span><span class="token punctuation">{</span>
		<span class="token selector">from</span><span class="token punctuation">{</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">to</span><span class="token punctuation">{</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span><span class="token comment">/*打开游览器进行性能分析   rendering计算*/</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
	<span class="token atrule"><span class="token rule">@keyframes</span> transformMove</span><span class="token punctuation">{</span>
		<span class="token selector">from</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">to</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>500px<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="旋转-rotate"><a href="#旋转-rotate" class="header-anchor">#</a> 旋转（rotate）</h3> <blockquote><p><strong>绕着盒子自身中心参照点(宽高一半的地方)位置进行旋转</strong></p> <p><strong>角度为正,顺时针旋转,角度为负,逆时针.</strong></p> <p><strong>旋转的过程中,这块盒子里的所有内容都会一起旋转</strong></p> <p><strong>取值:</strong></p> <ol><li>deg 度数</li></ol> <p>​    2.rad 弧度 1rad约等于57.3度</p> <p>​    3.turn 圈</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  	<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;我要忘了你的样子&lt;/div&gt;
<span class="token comment">/*文字也会跟着旋转,*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>如果它要旋转后和以前一样,最少要旋转多少度,假如是180度,这时候写上文字,文字会变反了.</p> <p>也就是,如果你添加一张照片旋转180度他绝对是反着的**</p> <p><strong>所以旋转360度才是一个完整的一圈</strong></p> <p>我们这时候就可以去做一些好玩的hover效果了</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
			<span class="token property">transition</span><span class="token punctuation">:</span> .6s<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.box:hover</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong>复合样式</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>300px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*先向右平移300px再向右旋转30度,如果把这两个换个位置呢*/</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>300px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*这时候为什么移动的位置不一样?坐标轴发生了变化,X轴朝向因为旋转发生了改变.*/</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>300px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span> 
			<span class="token property">animation</span><span class="token punctuation">:</span> move 3s linear infinite<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token atrule"><span class="token rule">@keyframes</span> move</span><span class="token punctuation">{</span>
			<span class="token selector">0%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> 
			<span class="token punctuation">}</span>
			<span class="token selector">50%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>300px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> 
			<span class="token punctuation">}</span>
			<span class="token selector">100%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>300px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span> 
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
<span class="token comment">/*第二个动画*/</span>
	<span class="token atrule"><span class="token rule">@keyframes</span> move</span><span class="token punctuation">{</span>
			<span class="token selector">0%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			<span class="token selector">50%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			<span class="token selector">100%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>300px<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><p><strong>tansform的多值写法相当于输出指令,游览器会一条条的去执行,</strong></p> <p><strong>平移的时候盒子的中心点会移动变化样式内多个样式值顺序的不同会导致完全不一样的结果</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*这个怎么去理解,写一个动画看看*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token property">animation</span><span class="token punctuation">:</span>trans 5s linear infinite<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token atrule"><span class="token rule">@keyframes</span> trans</span><span class="token punctuation">{</span>
		<span class="token selector">0%</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">25%</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">50%</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">75%</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">100%</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>20deg<span class="token punctuation">)</span><span class="token function">translateY</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="变换基点-transform-origin-x-y"><a href="#变换基点-transform-origin-x-y" class="header-anchor">#</a> 变换基点  transform-origin(x y)</h3> <blockquote><p><strong>第一个x轴相对于盒子宽度,第二个y轴相对于盒子的高度</strong></p> <p><strong>默认盒子绕着中心点来旋转<em>center center (50%,50%)</em>,</strong></p> <p><strong>盒子可以不绕着中心点进行旋转,可以调整.</strong></p> <p><strong>单位</strong></p> <p><strong>1.关键词 center top left right bottom</strong>*</p> <p>​    <strong>2.像素值 px</strong></p> <p>​    <strong>3.百分比 %</strong></p> <p>​    <strong>还可以设置负数</strong></p> <p><em><strong>2个值 x轴和y轴</strong></em></p> <p><em><strong>1个值 x轴设置 y轴默认是50%</strong></em></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>skyblue<span class="token punctuation">,</span>pink<span class="token punctuation">)</span><span class="token punctuation">;</span>
       		<span class="token property">animation</span><span class="token punctuation">:</span> roll 2s linear<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token atrule"><span class="token rule">@keyframes</span> roll</span> <span class="token punctuation">{</span>
			<span class="token selector">from</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			<span class="token selector">to</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;&lt;/div&gt;
<span class="token comment">/*默认绕着中心点旋转*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token comment">/*变换基点左上角*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span>100% 100%<span class="token punctuation">;</span>
 <span class="token comment">/*变换基点在右下角,相当于这里钉了一个钉子,这里不动,其他点就绕着这个钉子进行旋转
  还可以去写关键字的形式*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
<span class="token comment">/*此时就是在左上角*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
<span class="token comment">/*第二个值不写默认center.
  还支持我们的px像素值为单位.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span> 150px 150px<span class="token punctuation">;</span>
<span class="token comment">/*绕着中心点旋转,是以我们盒子左上角为基点.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>变化原点在元素的外面</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">transform-origin</span><span class="token punctuation">:</span> -100% -100%<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="缩放scale"><a href="#缩放scale" class="header-anchor">#</a> 缩放scale</h3> <p><strong>中心点为基点,盒子里的内容所有内容都会放大和缩小</strong></p> <p><em><strong>取值 正数 小数 0 负数</strong></em></p> <p>​    <em>&gt;1 放大</em></p> <p>​	0&lt;x&lt;1 缩小</p> <p>​    <em>0 盒子存在,只是看不到</em></p> <p>​	-1~0, 倒置缩小,  小于-1, 倒置放大</p> <p>一个值 x轴和y轴都缩放</p> <p>二个值  第一个x轴 第2个y轴</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  		<span class="token property">margin</span><span class="token punctuation">:</span>30px auto<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token comment">/*默认是1, 默认中心点基点.
     如果为负数可以不可以呢?我们去写上一些文字
 	 */</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;我要忘了你的样子&lt;/div&gt;
<span class="token comment">/*可以看到文字进行了方向颠倒*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>scale支持单轴放大和缩小</strong></p> <blockquote><p><strong>scaleX    scaleY</strong></p></blockquote> <p><strong>小姐姐之缩放反转</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span>200px auto<span class="token punctuation">;</span>
		<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>1.jpg<span class="token punctuation">)</span></span> center/cover<span class="token punctuation">;</span>
		<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">,</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">/*等于tranform:scaleX(2) scaleY(1);*/</span>
  
  
  	<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scaleX</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span>
    <span class="token comment">/*等于transform:scale(0.5,1)*/</span>
  <span class="token punctuation">}</span>
    <span class="token comment">/*scale可以写两个,分别是X轴的放缩和Y轴的放缩  
      X轴负数就是水平颠倒  Y轴负数就是竖直颠倒*/</span>
	
&lt;div class=<span class="token string">&quot;box&quot;</span>&gt;我要忘了你的样子&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="倾斜-skew"><a href="#倾斜-skew" class="header-anchor">#</a> 倾斜(skew)</h3> <p><strong>1个值 表示水平方向的倾斜</strong>*</p> <p><strong>2个值 第一个值是x轴 第二个值y轴</strong></p> <p>​    <em>x轴 逆时针为正</em></p> <p>​    <em>y轴 顺时针为正</em></p> <p>​    可以为负数</p> <p><strong>可以进行拆分</strong></p> <p>​     skewx()</p> <p>​     skewy()</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span>200px auto<span class="token punctuation">;</span>
		<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>1.jpg<span class="token punctuation">)</span></span> center/cover<span class="token punctuation">;</span>
		<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">skew</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
    <span class="token comment">/*只写一个值代表设置skewX,可写两个值(角度1,角度2).
    也可单独倾斜skew-X轴和skew-Y轴.
    这个也会改变我们X轴和Y轴的朝向.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/14-动画样式.html" class="prev">
        12-动画样式
      </a></span> <span class="next"><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html">
        14-3D盒阴影和遮罩
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/28.0cab868b.js" defer></script>
  </body>
</html>
